<!DOCTYPE html>
 <!-- thymeleaf追加 -->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活</title>
		<!-- 元语言 -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ./css/sm.min.css">
		<link rel="stylesheet" href=" ./css/sm-extend.min.css">
		<!-- vue追加 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
		<!-- vue的AJAX追加 -->
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
		<style type="text/css">
			#indexpage{
				color:orangered ;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
		<div id="app"> <!-- vue -->
			
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<a class="button button-link button-nav pull-left" href="main-index.html">
					<span class="icon icon-left"></span>
				</a>
				<!-- 社区入口 -->
				<h1 class="title">悦购物</h1>
			</header>



			<!-- 工具栏 -->
			<nav class="bar bar-tab">	
				<a id="indexpage" class="tab-item external" href="shop_index.html">
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="shop/chat/chat.html">
					<span class="icon icon-friends"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="shop/cart/cart.html">
					<span class="icon icon-cart"></span>
					<span class="tab-label">购物车</span>
				</a>
				<a class="tab-item external" href="shop/user/userCenter.html">
					<span class="icon icon-me"></span>
					<span class="tab-label">我的购物</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				
				<!-- 搜索栏 -->
				 <div class="searchbar row">
				     <div class="search-input col-85">
				       <input @click="goSearch" type="search" id='search' placeholder='输入关键字...'/>
				     </div>
				     <a @click="goSearch" class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
				 </div> 
				
				<div class="card">
				<div class="card-header">活动</div>
				<div class="card-content">
				  <div class="card-content-inner">
						<img src="img/%25E_X%7B2QJVR)@%60VE(9W3LZF1.png" height="160px" width="330px" >
				  </div>
				</div>
				<!-- <div class="card-footer">刷一刷</div> -->
				</div>
				
				<div class="card">
				<div class="card-header">猜你喜欢</div>
				<div class="card-content">
				  <div class="card-content-inner">
						<img src="img/CR$HXI6S6X(31%7B3G%7BS95F$R.png" height="160px" width="330px" >
				  </div>
				</div>
				<!-- <div class="card-footer">刷一刷</div> -->
				</div>
				
				  <div class="card">
				    <div class="card-header">便民服务</div>
				    <div class="card-content">
				      <div class="card-content-inner">
						  <span class="icon icon-app"></span>  <a href="http://www.sgcc.com.cn/">电力服务</a><br>
						  <span class="icon icon-message"></span>  <a href="http://www.cdwater.com.cn/">水道服务</a><br>
						   <span class="icon icon-caret"></span>  <a href="https://www.crcgas.com/">燃气服务</a>
					  </div>
				    </div>
				  </div>
				
			</div>
			
			
			
		</div> <!-- /vue -->	 
		</div>

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal">
			<div class="content-block">
				<p>这是一个侧栏</p>
				<p></p>
				<!-- Click on link with "close-panel" class will close panel -->
				<p><a href="#" class="close-panel">关闭</a></p>
			</div>
		</div>
		<!-- 导入js文件 -->
		<script src='./js/jquery-3.2.1.min.js'></script>
		<script src='./js/sm.js'></script>
		<script src='./js/sm-extend.js'></script>
		<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
		<!-- VUE的使用 -->
		<script>
		        var app = new Vue({
		            el:"#app",
		            data:{
						name:"",
		                commoditys:[]
		            },
		            // 方法区
		            methods:{
						//跳转到搜索页面的方法
		                goSearch:function(){ 
							window.location="shop/shop_search.html"
		               }
		            }
		        });
		</script>
		<script type="text/javascript">
			$.init();
		</script>
	</body>
</html>
